const HotMovieLately = ({ hotMovieDataList, hotMovieTagData, title, handleClickTagCallBack }) => {
  var hotDataList = []
  for (var i = 0; i < 5; i++) {
    var b = hotMovieDataList.slice(10 * i, 10 * (i + 1))
    hotDataList.push(b)
  }
  const handleClickTag = (type, item) => {
    handleClickTagCallBack(type, item)
  }
  console.log(hotDataList)
  return (
    <>
      <div className="Frame-Warp mb-5">
        <div className="HotMovieFrame">
          <div className="mb-3">
            <div className="border-line">
              <div className="row">
                <div className="col-10">
                  <div className="screenTab d-flex">
                    <h2 className="hotPlay-txt mr-3">最近热门{title}</h2>
                    <div className="d-flex">
                      {hotMovieTagData.map((item, index) => (
                        <a href="#1" key={index} className={'sreenTab-color f-size-13 mr-3'} onClick={(e) => handleClickTag(title, item)}>
                          {item}
                        </a>
                      ))}
                    </div>
                  </div>
                </div>
                <span className="col-2">
                  <a href="#" className="more f-size-12 d-flex justify-content-end">
                    更多»
                  </a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div className="hottvlist-wrap overflow-hidden">
          <ul className="d-flex flex-wrap m-0 slider-area-ul">
            {hotDataList.map((sliderItem, index) => (
              <div className="slider-item" key={index}>
                {sliderItem.map((item) => (
                  <li className="mb-2 movie-frame mr-27" key={item.id}>
                    <a href="#">
                      <img src={item.cover} alt="" className="movie-img" />
                    </a>
                    <p className="pl-1 pr-1 pt-1 movie-name f-size-13 mb-0 text-align-center display-block">
                      <span className="newImg mr-1 ">
                        <img src={require('../assets/images/ic_new.png')} alt="" />
                      </span>
                      <i>{item.title}</i>
                      <i className="score ml-1">6.3</i>
                    </p>
                  </li>
                ))}
              </div>
            ))}
          </ul>
        </div>
        <div className="d-flex justify-content-center align-items-center">
          <a href="" className="btn-prev mr-2"></a>
          <span className="silder-drop drop-color"></span>
          <span className="silder-drop"></span>
          <span className="silder-drop"></span>
          <span className="silder-drop"></span>
          <span className="silder-drop"></span>
          <a href="" className="btn-next ml-2"></a>
        </div>
      </div>
    </>
  )
}

export default HotMovieLately
